<template>
	<div class="detail">
		
		<myheader :title="title"></myheader>
		<swiper :imgs="imgdata"></swiper>
		<div class="produce1">
			<div class="pro1-left"><p>佛系社区</p><span>1100元/月</span></div>
			<div class="pro1-right">随时入住</div>
		</div>
		<div class="produce2">
			<div class="pro2-one">月租</div>
			<div class="pro2-two">有阳台</div>
			<div class="pro2-three">免中介费</div>
			<div class="pro2-four">押一付一</div>
			<div class="pro2-five">开放厨房</div>
		</div>
		<div class="produce3">
			<div class="pro3-one">
				<div class="pro3one-left">户型：<span>1室1厅1厨1卫</span></div>
				<div class="pro3one-right">面积：<span>30㎡</span></div>
			</div>
			<div class="pro3-two">
				<div class="pro3two-left">朝向：<span>西南</span></div>
				<div class="pro3two-right">窗户类型：<span>外窗</span></div>
			</div>
		</div>
		<div class="consul">
			<div class="coleft"><img src="../../../static/lxb/oth1.png"/></div>
			<div class="colcenter">送超值礼包,人人有份,点击查看</div>
			<div class="coright"><img src="../../../static/lxb/nav.png"/></div>
		</div>
		<div class="produce4box">
		 <div class="produce4">
		 	<div class="pro4-one">房型验真编号：81256</div>
		 	<div class="pro4-two">真实房源,假一陪百元<span>></span></div>
		 	<div class="pro4-three">
		 		<div class="pro4three-left"><div></div></div>
		 		<div class="pro4three-right">商家准入认证</div>
		 	</div>
		 	<div class="pro5-three">
		 		<div class="pro4three-left"><div></div></div>
		 		<div class="pro4three-right">真房源管理系统</div>
		 	</div>
		 	<div class="pro5-three">
		 		<div class="pro4three-left"><div></div></div>
		 		<div class="pro4three-right">举报合适 极速赔偿</div>
		 	</div>
		 </div>
		</div>
		<div class="consul">
			<div class="coleft"><img src="../../../static/lxb/logo.png"/></div>
			<div class="colcenter">送超值礼包,人人有份,点击查看</div>
			<div class="coright"><img src="../../../static/lxb/nav.png"/></div>
		</div>
		<div class="fypro">房源简介</div>
		<div class="detail-box">
			<div class="de-one">
				<div><img src="../../../static/lxb/tv.png"/>电视</div>
				<div><img src="../../../static/lxb/bx.png"/>冰箱</div>
				<div><img src="../../../static/lxb/xyj.png"/>洗衣机</div>
				<div><img src="../../../static/lxb/kt.png"/>空调</div>
				<div><img src="../../../static/lxb/rsq.png"/>热水器</div>
			</div>
			<div class="de-two">
				<div><img src="../../../static/lxb/chuang.png"/>床</div>
				<div><img src="../../../static/lxb/nq.png"/>暖气</div>
				<div><img src="../../../static/lxb/wifi.png"/>宽带</div>
				<div><img src="../../../static/lxb/yg.png"/>衣柜</div>
				<div><img src="../../../static/lxb/trq.png"/>天然气</div>

			</div>
		</div>
		<div class="hous-box">
			<div class="hou-title">
				<div class="htl-left">在租房间</div>
				<div class="htl-right">本房型共5间在租</div>
			</div>
		</div>
		<div class="house-detail">
			<div class="hde-left">533房间30㎡西南</div>
		    <div class="hde-right">1100元/月         <span>></span></div>
		    <div class="ren-time">随时入住，可签2-12个月</div>
		</div>
		<div class="house-detail">
			<div class="hde-left">533房间30㎡西南</div>
		    <div class="hde-right">1100元/月         <span>></span></div>
		    <div class="ren-time">随时入住，可签2-12个月</div>
		</div>
		<div class="house-detail">
			<div class="hde-left">533房间30㎡西南</div>
		    <div class="hde-right">1100元/月         <span>></span></div>
		    <div class="ren-time">随时入住，可签2-12个月</div>
		</div>
		<div class="many">更多房间请点此咨询</div>
		<div class="tel-box">
			<div class="tel-left"><p>公寓管家:刘宝宝</p>租房问题随时联系我</div>
			<div class="tel-right">电话咨询</div>
		</div>
		<div class="map-title">位置及周边</div>
		<div class="map-box"><img src="../../../static/lxb/map.png"/></div>
		<div class="loca-one">
			<div class="locaone-left">柚米国际社区 .柚米(重庆嘉瑞大道店)</div>
			<div class="locaone-right"><img src="../../../static/lxb/nav.png"/></div>
		</div>
		<div class="loca-two">嘉瑞大道22号</div>
		<div class="waring">
			<div class="waring-left"><img src="../../../static/lxb/jubao.png"/>乌龟承诺真实房源假一陪百元！</div>
			<div class="waring-right">举报该房源</div>
		</div>
		<div class="loca-two1">户型编号：81256</div>
		<div class="contact-box">
			<div class="heart"><img src="../../../static/lxb/heart.png"/>关注</div>
			<div class="heart"><img src="../../../static/lxb/sign.png"/>签约</div>
			<div class="zxzu">在线咨询</div>
			<div class="zxzu">电话咨询</div>
		</div>
		<div class="news" style="box-shadow: 0 0 10px darkgray; border:1px solid gainsboro">
			<img src="../../../static/lxb/im@2x.png" />
		</div>
	</div>
	
</template>

<script>
	import myheader from '@/components/public/myheader'
	import swiper from '@/components/public/swiper';
	export default {
		name: "mydetails",
		data() {
			return {
				imgdata: [
				{url: '../../static/lxb/pic1.png'},
				{url: '../../static/lxb/pic2.png'},
				{url: '../../static/lxb/pic3.png'},
				{url: '../../static/lxb/pic4.png'},
				{url: '../../static/lxb/pic5.png'}
				 
				],
				title: '',
				type: ''
			}
		},

		components: {
			myheader,
			swiper
		}
	}
</script>

<style scoped>
     .produce1{
     	width: 6.7rem;
     	height: 0.9rem;
     	margin: auto;
     	margin-top: 0.4rem;
     }
     .pro1-left{
     	width: 1.7rem;
     	height: 0.9rem;
     	float: left;
     }
     .pro1-left>p{
     	font-size: 0.32rem;
     	font-family: "黑体";
     }
     .pro1-left>span{
     	font-size: 0.16rem;
     	color: red;
     }
     .pro1-right{
     	width: 1.3rem;
     	height: 0.4rem;
     	float: right;
     	background: #e0eafe;
     	text-align: center;
     	line-height: 0.4rem;
     	color: #3576f6;
     	font-size: 0.12rem;
     	border-radius: 0.1rem;
     }
       .produce2{
       	width: 6.7rem;
       	height: 0.45rem;
       	margin: auto;
       	margin-top: 0.65rem;
       }
       .produce2>div{
       	float: left;
       	background: #e0eafe;
       	text-align: center;
       	line-height: 0.45rem;
       	font-size: 0.12rem;
       	color:  #3576f6;
       	width: auto;
       	height: 0.45rem;
       	margin-left: 0.15rem;
       }
       .produce3{
       	width: 6.7rem;
       	height: 1rem;
       	margin: auto;
       	margin-top: 0.3rem;
       }
       .pro3-one{
       	width: 6rem;
       	height: 0.4rem;
       }
       .pro3-two{
       	width: 5rem;
       	height: 0.4rem;
       	margin-top: 0.2rem;
       }
       .pro3-one>div{
       	float: left;
       	height:0.4rem;
       	width: auto;
       	color: #b6bac2;
       	font-size: 0.32rem;
       }
       .pro3-one span{
       	color: black;
       	font-family: "黑体";
       }
       .pro3one-right{
       	margin-left: 0.45rem;
       }
       .pro3-two>div{
       	float: left;
       	height: 0.4rem;
       	width: auto;
       	color: #b6bac2;
       	font-size: 0.32rem;
       }
       .pro3-two span{
       	color: black;
       	font-family: "黑体";
       }
       .pro3two-right{
       	margin-left: 1rem;
       }
       .consul{
       	width: 6.65rem;
       	height: 0.55rem;
       	margin: auto;
       	margin-top: 0.4rem;
       	border-bottom: 1px solid #e5e5e5;
       	border-top: 1px solid #e5e5e5;
       }
       .coleft{
       	width: 0.8rem;
       	height: 0.45rem;
       	float: left;
       	margin-top: 0.05rem;
       }
       .coleft>img{
       	width: 100%;
       	height: 100%;
       }
       .colcenter{
       	width: 4rem;
       	height: 0.4rem;
       	float: left;
       	font-size: 0.10rem;
       	margin-top: 0.05rem;
       	text-align: center;
       	line-height: 0.4rem;
       }
       .coright{
       	width: 0.15rem;
       	height: 0.3rem;
       	float: right;
       	
       }
       .coright>img{
       	width: 100%;
       	height: 100%;
       	margin-top: 0.05rem;
       }
       .produce4box{
       	width: 100%;
       	height: 3.2rem;
       	margin-top: 0.35rem;
        background: url(../../../static/lxb/real_bg.png) center;
        background-size: 100%,3.2rem;
       }
       .produce4box>img{
       	width: 100%;
       	height: 100%;
       }
       .produce4{
       	width: 6.65rem;
       	height: 2.40rem;
       float: left;
       	margin-top: 0.5rem;
       	margin-left: 0.5rem;
       }
       .pro4-one{
       	width: 3rem;
       	height: 0.4rem;
       	font-size: 0.16rem;
       	line-height: 0.4rem;
       }
        .pro4-two{
       	width: 4rem;
       	height: 0.45rem;
       	font-size: 0.26rem;
       	line-height: 0.45rem;
       }
       .pro4-two>span{
       	color: gray;
       }
       .pro4-three{
       	width: auto;
       	height: 0.35rem;
       	margin-top: 0.35rem;
       	color: #8c929f;
       }
       .pro5-three{
       	width: auto;
       	height: 0.35rem;
       	color: #8c929f;
       }
       .pro4three-left{
       	width: 0.15rem;
       	height: 0.15rem;
       	float: left;
       border: 2px solid #838a98;
       margin-top: 0.05rem;
       }
       .pro4three-left>div{
       	width: 0.1rem;
       	height: 0.1rem;
       	margin: auto;
       	margin-top: 0.02rem;
       	background: #838a98;
       }
       .pro4three-right{
       	width: auto;
       	height: 0.3rem;
       	font-size: 0.12rem;
       }
       .fypro{
       	width: 6.7rem;
       	height: 0.4rem;
       	margin: auto;
       	font-size: 0.32rem;
       	line-height: 0.4rem;
       	margin-top: 0.45rem;
       }
       .detail-box{
       	width: 6.7rem;
       	height: 2.4rem;
       	margin: auto;
        margin-top: 0.3rem;
       
       }
       .de-one{
       	width: 100%;
       	height: 0.9rem;
       
       	display: flex;
       	justify-content: space-around;
       color: #7f8693;
      
       
       }
       .de-one>div{
       	width: 1rem;
       	height: 0.9rem;
       
       	font-size: 0.12rem;
       text-align: center;
       }
       .de-one img{
       	width: 0.8rem;
       	height: 0.4rem;
       	text-align: center;
       }
       .de-two img{
       	width: 0.8rem;
       	height: 0.4rem;
       }
       .de-two>div{
       	width: 1rem;
       	height: 0.9rem;
       	font-size: 0.12rem;
       	color: #7f8693;
       	text-align: center;
       }
       .de-two{
       	width: 100%;
       	height: 0.9rem;
       		display: flex;
       	justify-content: space-around;
       	margin-top: 0.254rem;
       }
       .hous-box{
       	width: 6.7rem;
       	height:1.2rem;
       	margin: auto;
       	margin-top: 0.4rem;
       	border-top: 1px solid #e3e5ef;
       }
       .hou-title{
       	width: 6.7rem;
       	height: 0.4rem;
       	margin-top: 0.45rem;
       }
       .htl-left{
       	width: 1.8rem;
       	height: 0.4rem;
       	line-height: 0.4rem;
       	float: left;
       	text-align: center;
       	font-size: 0.4rem;
       }
       .hde-left{
       	width: 3rem;
       	height: 0.4rem;
       	line-height: 0.4rem;
       	float: left;
       	text-align: center;
       	font-size: 0.36rem;
       	margin-top: 0.3rem;
       }
        .htl-right{
       	width: 2.2rem;
       	height: 0.32rem;
       	line-height: 0.32rem;
       	float: right;
       	text-align: center;
       	font-size: 0.12rem;
       }
        .hde-right{
       	width: 2.2rem;
       	height: 0.32rem;
       	line-height: 0.32rem;
       	float: right;
       	text-align: center;
       	font-size: 0.12rem;
       	color: red;
       	margin-top: 0.3rem;
       }
       .hde-right>span{
       	color: darkgray;
       }
       .house-detail{
       	width: 6.7rem;
       	height: 1.40rem;
       	margin: auto;
       	border-top: 1px solid #e8eaf2;
       }
       .ren-time{
       	width: 3.2rem;
       	height: 0.3rem;
       	font-size: 0.22rem;
       	color: #535c6f;
       margin-top: 0.15rem;
       float: right;
       margin-right:3.3rem;
       	
       }
       .many{
       	width: 3rem;
       	height: 1.15rem;
       	margin: auto;
       	text-align: center;
       	line-height: 1.15rem;
       	font-size: 0.12rem;
       	color: #81a9fa;
       }
       .tel-box{
       	width: 6.7rem;
       	height: 1.4rem;
       	margin: auto;
       	border-bottom: 1px solid #e1e1e1;
       	border-top: 1px solid #e1e1e1;
       }
       .tel-left{
       	width: 2.8rem;
       	height: ]0.75rem;
       	float: left;
       	font-size: 0.12rem;
       	color: #838996;
       	margin-top: 0.3rem;
       }
       .tel-left>p{
       	font-size: 0.32rem;
       	color: black;
       }
       .tel-right{
       	width: 1.45rem;
       	height: 0.6rem;
       	float: right;
       	border: 1px solid #4a84f8;
       	border-radius: 0.3rem;;
       	margin-top: 0.3rem;
       	text-align: center;
       	line-height: 0.6rem;
       	color: #4a84f8;
       	font-size: 0.3rem;
       }
       .map-title{
       	width: 6.7rem;
       	height: 0.4rem;
       	margin: auto;
       	font-size: 0.36rem;
       	margin-top: 0.45rem;
       }
       .map-box{
       	width: 100%;
       	height: 4.6rem;
       	margin-top: 0.35rem;
       }
       .map-box>img{
       	width: 100%;
       	height: 100%;
       }
       .loca-one{
       	width: 6.7rem;
       	height: 0.4rem;
       	font-size: 0.26rem;
       	margin: auto;
       	margin-top: 0.35rem;
       }
       .locaone-left{
       	width: 4.8rem;
       	height: 0.4rem;
       	float: left;
       }
       .locaone-right{
       	width: 0.25rem;
       	height: 0.4rem;
       	float: right;
       }
       .locaone-right>img{
       	width: 100%;
       	height: 100%;
       }
       .loca-two{
       	width: 6.7rem;
       	height: 0.35rem;
       	font-size: 0.26rem;
       	margin-top: 0.2rem;
       	margin: auto;
       	color: #858d9a;
       }
       .loca-two1{
       	width: 6.7rem;
       	height: 0.35rem;
       	font-size: 0.26rem;
       	margin-top: 0.2rem;
       	margin-left: 0.3rem;
       
       	color: #858d9a;
       }
       .waring{
       	width: 6.75rem;
       	height: 0.3rem;
       	margin: auto;
       	margin-top: 0.8rem;
       }
       .waring-left{
       	width:4.5rem;
       	height: 0.3rem;
       	font-size: 0.2rem;
       	color: #858d9a;
       	line-height: 0.3rem;
       	float: left;
       }
       .waring-left>img{
       	width: 0.3rem;
       	height: 0.3rem;
       }
       .waring-right{
       	width: 1.6rem;
       	height: 0.3rem;
       	color: #007AFF;
       	float: right;
       	font-size: 0.2rem;
       }
       .contact-box{
       	width: 100%;
       	height: 1.3rem;
       	position: fixed;
       	bottom: 0;
       	z-index: 55;
       	display: flex;
       	justify-content: space-between;
       	background: white;
       	display: none;
       }
       .box{
       	width: 100%;
       	height: auto;
       	position: absolute;
       	top: 0;
       	bottom: 1.3rem;
       }
       .heart{
       	width: 0.6rem;
       	height: 0.75rem;
       	font-size: 0.12rem;
        margin-top: 0.45rem;
       }
       .heart>img{
       	width: 0.5rem;
       	height: 0.4rem;
       }
       .zxzu{
       	width: 2.42rem;
       	height: 0.95rem;
       	background: linear-gradient(30deg,#41cead,#2bb39e);
       	border-radius: 0.2rem;
       	text-align: center;
       	line-height: 0.95rem;
       		margin-top: 0.25rem;
       		color: white;
       }
       .zxzu1{
       	width: 2.42rem;
       	height: 0.95rem;
       	background: linear-gradient(30deg,#6293f6,#316ce2);
       	border-radius: 0.2rem;
       	text-align: center;
       	line-height: 0.95rem;
       	margin-top: 0.25rem;
       	color: white;
       }
       .news{
       	width: 0.8rem;
       	height: 0.7rem;
       	border-radius: 50%;
       	text-align: center;
         line-height: 1rem;
         position: absolute;
         top: 35rem;
         left: 6rem;
         background: white;
       }
       .news>img{
       	width: 0.5rem;
       	height: 0.5rem;
       }
</style>